<template>
    <el-dialog v-model="props.visible" title="烫金稿上传" align-center width="40%" @close="handleClose">
        <el-row :gutter="20" class="mb8" justify="space-between">
            <el-col :span="8">
                客户名称：CAKE(5人份)
            </el-col>
            <el-col :span="8" style="text-align: right;">
                产品名称：F款长方形餐具套装
            </el-col>
        </el-row>
        <el-row :gutter="20" justify="space-between">
            <el-col :span="8">
                <h3><strong>F款长方形抽屉盒（封皮）</strong> </h3>
            </el-col>
            <el-col :span="10">
                <div class="import_right">
                    <template v-if="!isNaN(aFrontCoverIndex)">
                        <el-upload :show-file-list="false" :action="uploadImgUrl" :headers="headers" multiple
                            :auto-upload="true" :on-success="handlTopSuccess" :before-upload="beforeTopUpload">
                            <template #trigger>
                                <el-button type="success">修改</el-button>
                            </template>
                        </el-upload>
                    </template>
                    <template v-else-if="!isNaN(hatIndex)">
                        <el-upload :show-file-list="false" :action="uploadImgUrl" :headers="headers" multiple
                            :auto-upload="true" :on-success="handlBottomSuccess" :before-upload="beforeBottomUpload">
                            <template #trigger>
                                <el-button type="success">修改</el-button>
                            </template>
                        </el-upload>
                    </template>

                    <el-button v-else disabled type="success">修改</el-button>
                    <el-button :disabled="isNaN(aFrontCoverIndex) && isNaN(hatIndex)" class="ml20" type="danger" @click="handleDelete">删除</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="6" class="mb20">
                <el-upload class="upload-demo" :show-file-list="false" drag :action="uploadImgUrl" :headers="headers"
                    multiple :auto-upload="true" :on-success="handlTopSuccess" :before-upload="beforeTopUpload">
                    <uploadStyle icon="PictureFilled" />
                </el-upload>
            </el-col>
            <el-col @click="aFrontCoverIndex === index ? aFrontCoverIndex = NaN : aFrontCoverIndex = index; hatIndex = NaN" :span="6"
                class="mb20" v-for="(item, index) in aFrontCoverImgList" :key="index">
                <img class="upload_img" :class="{ 'upload_img_bdr': aFrontCoverIndex === index }" :src="item" alt="">
            </el-col>
        </el-row>

        <el-row :gutter="20" justify="space-between">
            <el-col :span="1.5">
                <h3><strong>A款折叠红卡生日帽专版（生日帽）</strong> </h3>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="6" class="mb20">
                <el-upload class="upload-demo" :show-file-list="false" drag :action="uploadImgUrl" :headers="headers"
                    multiple :auto-upload="true" :on-success="handlBottomSuccess" :before-upload="beforeBottomUpload">
                    <uploadStyle icon="PictureFilled" />
                </el-upload>
            </el-col>
            <el-col @click="hatIndex === index ? hatIndex = NaN : hatIndex = index; aFrontCoverIndex = NaN" :span="6" class="mb20"
                v-for="(item, index) in hatImgList" :key="index">
                <img class="upload_img" :class="{ 'upload_img_bdr': hatIndex === index }" :src="item" alt="">
            </el-col>
        </el-row>



        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type UploadProps } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { globalHeaders } from "@/utils/request";
import uploadStyle from './uploadStyle.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const dialogVisible = ref();

const aFrontCoverImgList = ref<string[]>([]);
const aFrontCoverIndex = ref<number>(NaN);

const hatImgList = ref<string[]>([]);
const hatIndex = ref<number>(NaN);

const handlBottomSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()

    if (isNaN(hatIndex.value)) {
        hatImgList.value.push(response.data.url)
    }else {
        hatImgList.value[hatIndex.value] = response.data.url
    }
};

const beforeBottomUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

const handlTopSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    if (isNaN(aFrontCoverIndex.value)) {
        aFrontCoverImgList.value.push(response.data.url)
    }else {
        aFrontCoverImgList.value[aFrontCoverIndex.value] = response.data.url
    }

    dialogVisible.value.close()
};

const beforeTopUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

// 删除图片
const handleDelete = async () => {
    if (isNaN(aFrontCoverIndex.value) && isNaN(hatIndex.value)) {
        proxy?.$modal.msgError('请选择要删除的图片');
        return;
    }

    ElMessageBox.confirm(
        '确定要删除选中的图片吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            if (!isNaN(hatIndex.value)) {
                hatImgList.value.splice(hatIndex.value, 1);
            }else {
                aFrontCoverImgList.value.splice(aFrontCoverIndex.value, 1);
            }

            ElMessage({
                type: 'success',
                message: '删除成功!',
            })

            aFrontCoverIndex.value = NaN;
        })
        .catch(() => {

        })

};




const handleSubmit = async () => {
    emits('submit', false);
    // proxy?.$modal.msgSuccess('新增成功');
};

const handleClose = () => {
    emits('close');
};

</script>

<style lang="scss" scoped>
.import_right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}


::v-deep .el-upload-dragger {
    padding: 0px 4px !important;
    height: 70px !important;
    width: 160px;
}

.upload_img {
    height: 70px !important;
    width: 160px;
    object-fit: contain;
    border: 1px solid #FFFFFF;
}

.upload_img_bdr {
    border: 1px solid #3291F8;
}

.groupFlex {
    height: 70px;
    display: flex;
    align-items: center;
}
</style>